<template>
	<view>
		<!-- 1541 -->
		<u-modal :show="show" ref="uModal" :title="config.title" :show-title="config.showtitle"
			:confirm-text="config.confirmText" :cancel-text="config.cancelText" :show-cancel-button="config.showcancel"
			:show-confirm-button="config.showconfirm" @confirm="confirm" @cancel="cancel">
			<slot>

				<view class="modalinput" v-if="config.type == 'input'">
					<u-input :focus="true" :placeholder="config.placeholder" v-model="config.modalvalue" />
					<!-- type="number" -->
				</view>
				<view class="u-model__content__message" v-else>
					{{ $z.$t(config.content || "内容" )}}
					<view v-if="!config.showconfirm">
						<view v-if="config.isShowCornerMark && config.orderNum > 1" class='corner-mark'>
							{{config.orderNum}}
						</view>
						<u-button type="primary" shape="circle" :customStyle="cancelstyle" :plain="true"
							:text="config.cancelText" @click="cancel" class="btn">
						</u-button>
						<u-button type="primary" shape="circle" :text="config.confirmText" :customStyle="confirmstyle"
							@click="confirm"></u-button>
					</view>
				</view>
			</slot>
		</u-modal>
	</view>
</template>

<script>
	export default {
		name: "zmodal",
		data() {
			return {
				show: false,
				defaultconfig: {
					showtitle: true,
					showcancel: false,
					showconfirm: true,
					placeholder: this.$z.$t("请输入内容"),
					modalvalue: "",
					type: "",
					isShowCancelBtn: true,
				},
				cancelstyle: {
					margin: '40rpx 0 20rpx 0',
					background: "none",
					border: "2rpx solid #2093f5"

				},
				confirmstyle: {
					margin: '40rpx 0 20rpx 0'
				},
				config: {

					// isShowCornerMark: false,
					// orderNum: 0
				},
			};
		},
		onLoad() {

			console.log('接收到数据了吗======================');
		},
		methods: {
			init(config) {
				this.config = {
					...this.defaultconfig,
					...config,
				};
				console.log('this.config', this.config, config);
				this.show = true;
			},

			close() {
				this.show = false;
			},
			async confirm() {
				this.show = false;
				if (this.config.confirm) {
					this.config.confirm(this.config);
				}
			},
			async cancel() {
				this.show = false;
				console.log("cancel");
				if (this.config.cancel) {
					this.config.cancel();
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.btn {
		position: relative;
	}

	.corner-mark {
		position: absolute;
		// float: right;
		background-color: red;
		color: white;
		border-radius: 50%;
		padding: 8rpx 16rpx;
		font-size: 28rpx;
		font-weight: 800;
		display: inline-block;
		left: 84%;
		z-index: 10;
		top: 45%;

	}

	.modalinput {
		padding: 20rpx;
	}

	.u-model__content__message {
		// padding: 17px;
		font-size: 14px;
		text-align: center;
		color: #606266;
		line-height: 1.3;
	}

	.u-model__content__title {
		font-size: 14px;
		font-weight: bold;
		text-align: center;
		color: #333;
		line-height: 1.5;
	}
</style>